<template>
    <van-notice-bar
            left-icon="volume-o"
            scrollable
            text="欢迎大家发帖打卡每天的学习记录"
    />
<!--    <van-search v-model="searchList" placeholder="请输入搜索关键词" @search="onSearch(name)"/>-->
    <van-button class="add-button" icon="plus" type="primary" @click="doCreatePoster"></van-button>
    <van-card
            class="img.van-image__img"
            style="margin-top:20px"
            v-for="poster in posterList"
            :tag="poster.id"
            :desc="'创建人by：'+ poster.username"
            :title="'标题：'+poster.title"
            :thumb="poster.avatar ? poster.avatar : defaultPicture"
            @click="doPosterDetail(poster.id)"
    >
        <template #tags>
            <van-tag plain type="danger" v-if="poster.status === 0" style="margin-right:10px ">
                公开
            </van-tag>
            <van-tag plain type="danger" v-if="poster.status === 1" style="margin-right:10px ">
                仅好友可见
            </van-tag>
            <van-tag plain type="danger" v-if="poster.status === 2" style="margin-right:10px ">
                仅队伍伙伴可见
            </van-tag>
        </template>
        <template #bottom>
            <div>
                {{"创建时间：" + poster.createTime}}
            </div>
        </template>
    </van-card>

    <!--todo 弹出框显示具体的context内容-->
    <van-dialog
            v-for="poster in posterDetail" v-model:show="show"
            :title="poster.title" show-cancel-button id="dialog"
    style="width: 800px">
        <van-card
                class="img.van-image__img"
                style="margin-top:20px"
                :tag="poster.id"
                :desc="'创建人by：'+ poster.username"
                :title="'标题：'+poster.title"
                :thumb="poster.avatar ? poster.avatar : defaultPicture"
        >
            <template #bottom>
                <div>
                    {{"创建时间：" + poster.createTime}}
                </div>
            </template>
        </van-card>
        <div style="border: 1px solid black;margin-top: 30px;width: 80%;margin-left: 75px">
            {{poster.content}}
        </div>
    </van-dialog>
    <van-empty description="搜索结果为空" v-if="!posterList || posterList.length < 1"/>
</template>

<script setup lang="ts">
    import {useRouter} from 'vue-router'
    import TeamCardList from '../components/TeamCardList.vue'
    import {onMounted,ref} from "vue";
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    import {defaultPicture} from '../common/userCommand';



    const router = useRouter();
    const posterList = ref([]);
    const posterDetail = ref([]);
    const show = ref(false);


    onMounted(async () =>{
        const res = await myAxois.get("/poster/list");
        if(res.data.code === 0) {
            posterList.value = res.data.data;
        }else{
            showFailToast("失败")
        }
    })

    const doCreatePoster = () =>{
        router.push("/poster-create")
    }

    const doPosterDetail = async (id:number) =>{
        show.value = true;
        const res = await myAxois.get("/poster/list",{
            params:{
                id
            }
        })
        if(res.data.code === 0){
            posterDetail.value = res.data.data;
        }
        else{
            showFailToast("获取失败")
        }
    }
</script>

<style lang="css" scoped>
     覆盖Vant Card图片的边框
    :deep(.van-card__thumb) {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    /*::v-deep(.van-card) {*/
    /*    background-color: blue;*/
    /*}*/
</style>